<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>数码商城</title>
  <link rel="stylesheet" type="text/css" href="../res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
  <script type="text/javascript" src="../res/layui/layui.js"></script>
  <script type="text/javascript" src="../js/index.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="index.html">首页</a>
      </p>
      <div class="sn-quick-menu">
        <div class="login"><a href="login.html">登录</a></div>
        <div class="sp-cart"><a href="shopcart.html">购物车</a><span>3</span></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="index.html" title="数码商城">
            <img src="../res/static/img/yuele1.jpg" height="109" width="109">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="" class="layui-form" novalidate>
            <input type="text" name="title" required  lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo">
                <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base shopcart-content">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="commodity.html">所有商品</a>
            <a href="buytoday.html">今日团购</a>
            <a href="information.html"  class="active">手表的基本知识</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-bg w1200">
      <h3>夏季清仓</h3>
      <p>宝宝被子、宝宝衣服3折起</p>
    </div>
    <div class="cart w1200">
      <div class="cart-table-th">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="allCheckked" type="checkbox" value="true">
            </div>
          <label>&nbsp;&nbsp;全选</label>
          </div>
        </div>
        <div class="th th-item">
          <div class="th-inner">
            商品
          </div>
        </div>
        <div class="th th-price">
          <div class="th-inner">
            单价
          </div>
        </div>
        <div class="th th-amount">
          <div class="th-inner">
            数量
          </div>
        </div>
        <div class="th th-sum">
          <div class="th-inner">
            小计
          </div>
        </div>
        <div class="th th-op">
          <div class="th-inner">
            操作
          </div>
        </div>  
      </div>
      <div class="OrderList">
        <div class="order-content" id="list-cont">
          
        </div>
      </div>


      <!-- 模版导入数据 -->
      <script type="text/html" id="demo">
        {{# layui.each(d.infoList,function(index,item){}}
          <ul class="item-content layui-clear">
            <li class="th th-chk">
              <div class="select-all">
                <div class="cart-checkbox">
                  <input class="CheckBoxShop check" cart_id="{{item.cart_id}}" goods_id="{{item.g.goods_id}}" type="checkbox" num="all" name="select-all" value="true">
                </div>
              </div>
            </li>
            <li class="th th-item">
              <div class="item-cont">
                <a href="javascript:;"><img src="/uploads/{{item.g.picture}}" alt="{{item.g.goods_name}}"></a>
                <div class="text">
                  <div class="title">{{item.g.goods_name}}</div>
                  <p><span>粉色</span>  <span>130</span>cm</p>
                </div>
              </div>
            </li>
            <li class="th th-price">
              <span class="th-su">{{item.g.price}}</span>
            </li>
            <li class="th th-amount">
              <div class="box-btn layui-clear">
                <div class="less layui-btn">-</div>
                <input class="Quantity-input" type="" name="" value="{{item.num}}" disabled="disabled">
                <div class="add layui-btn">+</div>
              </div>
            </li>
            <li class="th th-sum">
              <span class="sum">{{item.g.price*item.num}}</span>
            </li>         
            <li class="th th-op">      
              <span class="dele-btn">删除</span> 
            </li>
          </ul>
        {{# });}}
      </script>


      <div class="FloatBarHolder layui-clear">
        <div class="th th-chk">
          <div class="select-all">
            <div class="cart-checkbox">
              <input class="check-all check" id="" name="select-all" type="checkbox"  value="true">
            </div>
            <label>&nbsp;&nbsp;已选<span class="Selected-pieces">0</span>件</label>
          </div>
        </div>
        <div class="th batch-deletion">
          <span class="batch-dele-btn">批量删除</span>
        </div>
        <div class="th Settlement">
          <button id="buy" class="layui-btn">结算</button>
        </div>
        <div class="th total">
          <p>应付：<span class="pieces-total">0</span></p>
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript">
  layui.config({
    base: '../res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','jquery','element','car','cookie'],function(){
    var mm = layui.mm,$ = layui.$,element = layui.element,car = layui.car,cookie=layui.cookie;
    //加载登录用户信息
     var user = sessionStorage.getItem("user");
     user = JSON.parse(user);//将sessionStorage中存储的json转换成字符串
     //查询购物车
      $.post(
   	 	"../../findAllcart.do?user_id="+user.user_id,
   	 	function(res){
   			$(res.data).each(function(){
   			var html='<ul class="item-content layui-clear"><li class="th th-chk"><div class="select-all"><div class="cart-checkbox"><input class="CheckBoxShop check" id="" type="checkbox" num="all" name="select-all" value="true"></div></div></li><li class="th th-item"><div class="item-cont"><a href="javascript:;"><img src="/uploads/'+this.g.picture+'" alt=""></a><div class="text"><div class="title">'+this.g.goods_name+'</div><p><span>粉色</span><span>130</span>cm</p></div></div></li><li class="th th-price"><span class="th-su">'+this.g.price+'</span></li><li class="th th-amount"><div class="box-btn layui-clear"><div class="less layui-btn">-</div><input class="Quantity-input" type="" name="" value="'+this.num+'" disabled="disabled"><div class="add layui-btn">+</div></div></li><li class="th th-sum"><span class="sum">'+this.g.price*this.num+'</span></li><li class="th th-op"><span class="dele-btn">删除</span></li></ul>'
    			$("#list-cont").append($(html));
    		});
		car.init();
   	},"json"
   	 );
     
   	//加载购物车商品种数
	$.post(
		"../../getCount.do?user_id="+user.user_id,
		function(res){
			$(".sp-cart span").html(res);
		},"json"
	);




	//加载登录用户信息
	var user = sessionStorage.getItem("user");
	if(user==null){//如果用户没有登录，跳转到登录页面
		location.href = "login.html";
	}
	user = JSON.parse(user);
	//console.log(user)
	$(".login").html('欢迎，<span style="font-size:20px ">'+user.nickname+'</span>&nbsp;&nbsp;&nbsp;&nbsp;<a id="logout" href="javascript:;">安全退出</a>');
	
	//退出按钮点击事件
	$("#logout").click(function(){
		$.cookie('token',null);//清除cookie中的token
		sessionStorage.removeItem("user");//删除session
		location.href="login.html";//跳转到登录页
	});
   	
    //删除购物车中的商品
    



    
    //结算按钮
    $("#buy").click(function(){
    	if($(".Selected-pieces").html()=="0"){
    		layer.msg("请选择商品！");
    		return false;
    	}
    	//1.先添加订单信息（要求返回订单号）；2.添加订单明细；3.删除购物车中对应商品
    	$.post(
    		"../../addorders.do",
    		{
    			userId:user.id,//用户id
    			totalMoney:$(".pieces-total").html().substr(1)//应付金额
    		},function(res){//返回的res就是订单号
    			if(res>0){//订单添加成功后，添加订单明细
    				var input = $(".CheckBoxShop:checked");//获取选中的商品
    				//对每个勾选商品添加到订单明细表
    				$(input).each(function(index){
    					var that = this;
    					$.post(
    						"../../findOrder_detail.do",
    						{
    							pid:$(this).attr("goods_id"),//商品id
    							num:$(this).parent().parent().parent().parent().find(".Quantity-input").val(),//购买数量
    							orderId:res//订单号
    						},function(res){
    							//订单明细添加成功后，删除购物车对应商品
    							$.post(
    								"../../delcart.do?id="+that.id,//购物车id
    								function(res){
    									location.href="over.html?money="+$(".pieces-total").html().substr(1);
    								},"json"
    							);
    						},"json"
    					);
    				});
    			}
    			layer.msg("下单成功！");
    		},"json"
    	); 
    });
    
    
    // 模版导入数据
     var html = demo.innerHTML,
     listCont = document.getElementById('list-cont');
     mm.request({
       url: '../../findAllcart.do?user_id='+users.user_id,
       success : function(res){
         listCont.innerHTML = mm.renderHtml(html,res)
         element.render();
         car.init()
       },
       error: function(res){
         console.log(res);
       }
     })
    car.init()  


});
</script>
</body>
</html>